<template>
  <view class="wp">
    <view class="search">
      <u-search
        bgColor="#ffffff"
        borderColor="#eeeeee"
        placeholder="请输入关键字"
        :showAction="false"
        v-model="keyword"
      ></u-search>
    </view>
    <view class="ul-list">
      <view class="li" v-for="(item, index) in list" :key="item.id">
        <navigator
          class="con"
          :url="'/pages/edu/list?id=' + item.id"
          hover-class="none"
        >
          <view class="pic">
            <u-image :src="item.thumbs_text" :lazy-load="true">
              <template v-slot:loading>
                <u-loading-icon color="red"></u-loading-icon>
              </template>
            </u-image>
          </view>
          <view class="txt">
            <view class="tit">
              <h3>{{ item.title }}</h3>
              <view class="desc" v-html="item.content">
                <!-- {{item.content}} -->
              </view>
            </view>
            <view class="info">
              <view class="date">
               
                <text class="t1" style="font-weight:bold;color:#f60">￥</text>
                <text class="t2" style="font-weight:bold;color:#f60">1200</text>
              </view>
              <view class="look">
                <text class="t1">共</text>
                <text class="t1" style="color:#f60">{{ item.sublist_text }}</text>
                <text class="t1">节</text>
                
              </view>
              <view class="look" style="margin-right:15px">
               
                <text class="t2" style="color:#f60">{{ item.likes_text }}</text>
                <text class="t1">人点赞</text>
              </view>
            </view>
          </view>
        </navigator>
      </view>
    </view>
    <view class="fooder"> </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      cateid: 0,
      li: [
        {
          id: 1,
          pic: "https://picsum.photos/id/1/200/180",
          title: "特效入门课程",
          desc: "帮助您一周内学会特效基础操作，走向优秀特效师",
          date: 8,
          look: 2532,
        },
        {
          id: 2,
          pic: "https://picsum.photos/id/2/200/180",
          title: "特效入门课程",
          desc: "帮助您一周内学会特效基础操作，走向优秀特效师",
          date: 12,
          look: 4156,
        },
        {
          id: 3,
          pic: "https://picsum.photos/id/33/200/180",
          title: "特效入门课程",
          desc: "帮助您一周内学会特效基础操作，走向优秀特效师",
          date: 7,
          look: 263,
        },
        {
          id: 4,
          pic: "https://picsum.photos/id/44/200/180",
          title: "特效入门课程",
          desc: "帮助您一周内学会特效基础操作，走向优秀特效师",
          date: 12,
          look: 4156,
        },
        {
          id: 5,
          pic: "https://picsum.photos/id/55/200/180",
          title: "特效入门课程",
          desc: "帮助您一周内学会特效基础操作，走向优秀特效师",
          date: 12,
          look: 2532,
        },
        {
          id: 6,
          pic: "https://picsum.photos/id/66/200/180",
          title: "特效入门课程",
          desc: "帮助您一周内学会特效基础操作，走向优秀特效师",
          date: 8,
          look: 2532,
        },
        {
          id: 7,
          pic: "https://picsum.photos/id/77/200/180",
          title: "特效入门课程",
          desc: "帮助您一周内学会特效基础操作，走向优秀特效师",
          date: 12,
          look: 4156,
        },
        {
          id: 8,
          pic: "https://picsum.photos/id/88/200/180",
          title: "特效入门课程",
          desc: "帮助您一周内学会特效基础操作，走向优秀特效师",
          date: 8,
          look: 2532,
        },
        {
          id: 9,
          pic: "https://picsum.photos/id/9/200/180",
          title: "特效入门课程",
          desc: "帮助您一周内学会特效基础操作，走向优秀特效师",
          date: 8,
          look: 2532,
        },
        {
          id: 10,
          pic: "https://picsum.photos/id/10/200/180",
          title: "特效入门课程",
          desc: "帮助您一周内学会特效基础操作，走向优秀特效师",
          date: 8,
          look: 2532,
        },
      ],
    };
  },
  onLoad(option) {
    this.cateid = option.cateid ? option.cateid : 0;

    this.getsubjectlistdata();
  },
  methods: {
    // 获取课程与课程章节的数据
    async getsubjectlistdata() {
      let data = {
        cateid: this.cateid,
      };
      let result = await this.$u.api.subject.categorylist(data);

      if (result.code) {
        this.list = result.data;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #ffffff;
}
.wp {
  .search {
    margin: 0 auto;
    padding-top: 15px;
    padding-bottom: 15px;
    width: 80%;
  }
}
.ul-list {
}
.ul-list .li {
  overflow: hidden;
  border-bottom: 1px solid #f6f6f6;
}
.ul-list .con {
  overflow: hidden;
  padding: 20rpx;
}
.ul-list .pic {
  float: left;
  width: 220rpx;
  height: 170rpx;
  overflow: hidden;
  border-radius: 8rpx;
  margin-right: 25rpx;
}
.ul-list .txt {
  overflow: hidden;
}
.ul-list h3 {
  color: #1e2138;
  font-size: 30rpx;
  padding-top: 0rpx;
  margin-bottom: 10rpx;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.ul-list .desc {
  color: #666666;
  font-size: 25rpx;
  height: 80rpx;
  line-height: 35rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.ul-list .info {
  overflow: hidden;
  width: 100%;
  color: #ababab;
  font-size: 25rpx;
}
.ul-list .info .t2 {
  color: #63d58a;
}
.ul-list .info .date {
  float: left;
}
.ul-list .info .look {
  float: right;
}
.fooder {
  height: 40rpx;
}
</style>
